<template>
	<div :style='{ "color": "#666", "padding": "0px 30px 30px", "fontSize": "14px" }'>
		<el-form
			:style='{ "border": "0px solid rgba(255,255,255,1)", "padding": "30px 0 10px", "borderRadius": "0 0 8px 8px", "alignItems": "flex-start", "flexWrap": "wrap", "background": "rgba(255,255,255,0)", "display": "flex", "fontSize": "inherit" }'
			class="add-update-preview" ref="adminForm" :model="adminForm" label-width="150px">
			<el-row>

				<el-form-item :style='{ "width": "48%", "margin": "0 0 30px 0", "fontSize": "inherit", "color": "inherit" }'
					label="用户名" prop="username">
					<el-input v-model="adminForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "48%", "margin": "0 0 30px 0", "fontSize": "inherit", "color": "inherit" }'
					label="头像" prop="image">
					<file-upload tip="点击上传头像" action="api/upload/uploadAvatar" :limit="1" :multiple="false"
						:fileUrls="adminForm.image ? adminForm.image : ''" @change="avatarUploadChange"></file-upload>
				</el-form-item>
				<el-form-item
					:style='{ "padding": "0 10px", "margin": "30px 0", "alignItems": "center", "textAlign": "center", "display": "flex", "width": "100%", "perspective": "320px", "-webkitPerspective": "320px", "fontSize": "48px", "justifyContent": "flex-end" }'>
					<el-button class="btn3"
						:style='{ "border": "0px solid rgba(126, 96, 16, .2)", "cursor": "pointer", "padding": "0 30px", "margin": "0px 20px 0 0", "outline": "none", "color": "#fff", "borderRadius": "4px", "background": "#62779c", "width": "auto", "fontSize": "16px", "lineHeight": "24px", "height": "40px" }'
						type="primary" @click="dataFormSubmit">
						<span class="icon iconfont icon-tijiao16"
							:style='{ "margin": "0 2px", "fontSize": "18px", "color": "inherit", "display": "none" }'></span>
						提交
					</el-button>
				</el-form-item>
			</el-row>
		</el-form>
	</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isMobile } from "@/utils/validate";

export default {
	data() {
		return {
			flag: '',
			adminFlag: false,
			genderOptions: [],
			adminForm:{
				username: '',
				image: '',
			}
		};
	},
	mounted() {
		var table = this.$storage.get("sessionTable");
		this.flag = table;
		this.$http({
			url: `${this.$storage.get("sessionTable")}/session`,
			method: "get"
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.adminForm = data.data;
			} else {
				this.$message.error(data.msg);
			}
		});
		this.genderOptions = "男,女".split(',')
	},


	methods: {
		avatarUploadChange(file) {
			if (!file) {
				this.registerForm.avatar = "";
				return;
			}
			if (file instanceof File) {

				let formData = new FormData();
				formData.append("file", file);

				this.$http.post("api/upload/uploadAvatar", formData, {
					headers: {
						// 如果有认证头，例如token，可以在这里添加
						// 'Authorization': `Bearer ${localStorage.getItem('token')}`
					}
				}).then(({ data }) => {
					if (data.code === 0) {
						this.adminForm.image = data.url;
						this.$message.success("头像上传成功");
					} else {
						this.$message.error(data.msg || "上传失败");
					}
				}).catch(() => {
					this.$message.error("上传失败");
				});
			} else if (typeof file === "string") {
				this.adminForm.image = file;
			} else if (file?.response?.code === 0) {
				this.adminForm.image = file.response.url;
			} else {
				this.$message.error("头像上传失败");
			}
		},

		dataFormSubmit() {
			if (!this.adminForm.id) {
				this.$message.error("未选择用户，无法提交");
				return;
			}
			this.$refs["adminForm"].validate(valid => {
				if (valid) {
					this.$http({
						url: `admin/${!this.adminForm.id ? "save" : "update"}`,
						method: "post",
						data: this.adminForm
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: "操作成功",
								type: "success",
								duration: 1500,
								onClose: () => {
									this.visible = false;
									this.$emit("refreshDataList");
								}
							});
						} else {
							this.$message.error(data.msg);
						}
					});
				}
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
	width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	color: #999;
	font-weight: 500;
	display: inline-block;
	width: 150px;
	font-size: inherit;
	line-height: 40px;
	text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
	margin-left: 150px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
	border: 0px solid #000;
	border-radius: 0px;
	padding: 0 12px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: inherit;
	background: #fff;
	width: auto;
	font-size: 14px;
	min-width: 350px;
	height: 36px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
	border: 0px solid #000;
	border-radius: 0px;
	padding: 0 10px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: inherit;
	background: #fff;
	width: auto;
	font-size: 14px;
	min-width: 350px;
	height: 36px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
	border: 0px solid #000;
	border-radius: 0px;
	padding: 0 10px 0 30px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: inherit;
	background: #fff;
	width: auto;
	font-size: 14px;
	min-width: 350px;
	height: 36px;
}

.add-update-preview /deep/ .el-upload--picture-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	line-height: initial;
	vertical-align: middle;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	border: 0px solid #000;
	cursor: pointer;
	border-radius: 0px;
	color: inherit;
	background: #fff;
	object-fit: cover;
	width: 180px;
	font-size: 32px;
	line-height: 90px;
	text-align: center;
	height: 90px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
	border: 0px solid #000;
	cursor: pointer;
	border-radius: 0px;
	color: inherit;
	background: #fff;
	object-fit: cover;
	width: 180px;
	font-size: 32px;
	line-height: 90px;
	text-align: center;
	height: 90px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	border: 0px solid #000;
	border-radius: 0px;
	padding: 12px;
	box-shadow: 0 0 0px rgba(64, 158, 255, .5);
	outline: none;
	color: inherit;
	background: #fff;
	width: auto;
	font-size: 14px;
	min-width: 350px;
	height: 120px;
}

.add-update-preview .btn3 {
	border: 0px solid rgba(126, 96, 16, .2);
	cursor: pointer;
	border-radius: 4px;
	padding: 0 30px;
	margin: 0px 20px 0 0;
	outline: none;
	color: #fff;
	background: #62779c;
	width: auto;
	font-size: 16px;
	line-height: 24px;
	height: 40px;
}

.add-update-preview .btn3:hover {
	transform: scale(0.9);
	opacity: 0.8;
}

.editor>.avatar-uploader {
	line-height: 0;
	height: 0;
}
</style>
